<template>
    <div class = 'cdetail'>
        <div class = 'Ctop'>
             <div class = 'back'>
                <div @click = '$router.go(-1)' v-if = '!$route.query.Cname'><span><i class='iconfont icon-youjiantou'></i></span></div>
                <router-link :to = '{path:"/cinema",query:{name:$route.query.Cname,id:$route.query.Cid}}'>
                    <div v-if = '$route.query.Cname'><span><i class='iconfont icon-youjiantou'></i></span></div>
                </router-link>
            </div>    
            <span>{{cinemaName}}</span>
        </div>    
        <div class="Cbody" v-show="!iswait&&ishas">
            <div class=box>
                <div v-for="(item,index) in seatsArr" v-bind:key='index'>
                    <span v-for="(e,i) in item" v-bind:key='i+index' :class="'seats-'+e"></span>
                </div>
            </div>
        </div>
        <div class="Ccontent" v-if="!iswait&&ishas">
            <div>
                <span class="s-img s-can"></span>
                <span>可选</span>
            </div>
            <div>
                <span class="s-img s-sale"></span>
                <span>已售</span>
            </div>
            <div>
                <span class="s-img s-select"></span>
                <span>选中</span>
            </div>
        </div>
        <div class="movie" v-if="!iswait&&ishas">
            <div class="left">
                <div class="l-top">
                    <div class="movieName">{{$route.query.movieName}}</div>
                </div>
                <div class="l-bottom">
                    <div class="time">{{time}}</div>
                    <div class="clock">场次： {{clock}}</div>
                </div>
            </div>
            <div class="right">
                <div class="price">¥{{price}}</div>
            </div>
        </div>
        <div class="none" v-if="!iswait&&!ishas">
            暂无影片数据
        </div>
        <div class="wait" v-if="iswait">
            加载中......
        </div>
        <div class="showTip error" v-if="!iswait&&isbuy&&!islogin&&ishas">
            请先登录!
        </div>
        <div class="showTip success" v-if="!iswait&&isbuy&&islogin&&ishas&&hasSelect!=0">
            购票成功√
        </div>
        <div class="showTip error" v-if="!iswait&&isbuy&&islogin&&ishas&&hasSelect==0">
            请选择座位!
        </div>
        <div class="bottom" @click="buyClick">
            购&nbsp;&nbsp;&nbsp;票
        </div>
    </div>    
</template>
<script>
import $ from 'jquery';
export default {
    data(){
        return {    
            time : '02-17',
            cinemaDetail:[],
            cinemaMovie:[],
            iswait:true,
            detailDate:[],
            price : '',
            clock : '',
            ishas : false,
            isbuy : false,
            islogin : false,
            timeout : null,
            hasSelect : 0,
            seatsArr : [[1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 2, 2],
            [2, 2, 1, 1, 2, 2, 1, 1, 1, 1],
            [1, 1, 3, 3, 1, 2, 2, 1, 1, 1],
            [1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
            [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
            [1, 1, 0, 1, 1, 1, 1, 0, 1, 1]],
            flag : 0,
            randomArr :[
                    [[1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                    [1, 1, 1, 1, 1, 1, 1, 1, 2, 2],
                    [2, 2, 1, 1, 2, 2, 1, 1, 1, 1],
                    [1, 1, 3, 3, 1, 2, 2, 1, 1, 1],
                    [1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                    [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
                    [1, 1, 0, 1, 1, 1, 1, 0, 1, 1]],
                [[1, 1, 0, 0, 1, 1, 0, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 1, 1, 2, 2],
                [1, 1, 3, 3, 1, 1, 1, 3, 3, 1],
                [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                [1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
                [1, 1, 0, 0, 1, 1, 0, 0, 3, 3]],
                    [[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
                    [1, 1, 1, 3, 3, 1, 1, 1, 2, 2],
                    [2, 2, 1, 1, 2, 2, 1, 1, 1, 1],
                    [1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                    [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
                    [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
                    [1, 1, 0, 3, 3, 1, 1, 0, 1, 1]],
                [[1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 1, 1, 3, 3],
                [1, 1, 1, 1, 2, 2, 1, 1, 1, 1],
                [1, 1, 3, 3, 0, 0, 3, 3, 1, 1],
                [1, 2, 2, 1, 0, 0, 1, 1, 1, 1],
                [1, 1, 1, 1, 0, 0, 1, 1, 1, 1],
                [1, 1, 1, 1, 0, 0, 1, 1, 1, 1]],
                    [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                    [1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                    [2, 2, 1, 1, 1, 1, 1, 1, 3, 3],
                    [1, 1, 3, 3, 1, 2, 2, 1, 1, 1],
                    [1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
                    [2, 2, 1, 1, 1, 1, 1, 0, 1, 1],
                    [3, 3, 3, 3, 3, 1, 1, 1, 1, 1]]
            ]
        }
    },
    methods:{
        getDetail(id,cid){
            // console.log(id,cid)
             axios.get(`https://apis.netstart.cn/maoyan/cinema/detail?cinemaId=${id}`)
           .then(
                data=> {
                    this.cinemaDetail = data.data.data;
                    axios.get(`https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=${id}&ci=${cid}&channelId=4`)
                    .then(
                        data=> {
                            // console.log(data.data)
                            this.cinemaMovie = data.data.data.movies;
                            // console.log(this.cinemaMovie)
                            this.cinemaMovie.forEach((e)=>{
                                if(e.id == this.$route.query.movieId){
                                    this.detailDate = e;
                                }
                            })
                            // console.log(this.detailDate)
                            if(!this.time){
                                let year = new Date().getFullYear();
                                let month = new Date().getMonth()+1;
                                let day = new Date().getDate();
                                day = day>9 ? day : '0' + day;
                                month = month>9 ? month : "0"+month;
                                this.time = `${year}-${month}-${day}`;
                            }
                            // console.log(this.time)
                            if(this.detailDate.shows){
                                let istrue = true;
                                this.detailDate.shows.forEach((e)=>{
                                // console.log(e);
                                    if(e.showDate == this.time){
                                        if(e.plist[0]){
                                            this.price = e.plist[0].baseSellPrice;
                                            this.clock = e.plist[0].tm;
                                        }else{
                                            istrue = false;
                                        }
                                    }
                                })
                                if(istrue){
                                    this.spanclick();
                                    this.ishas = true;
                                }else{
                                    this.ishas = false;
                                }
                            }else{
                                this.ishas = false;
                            }
                                this.iswait = false;
                        }
                    )
                }
            )
        },
        spanclick(){
            // console.log($('.box>div>span'))
            $('.box>div>span').click(function(e){
                // console.log(e.target.className)
                if(e.target.className == 'seats-1'){
                    $(e.target).removeClass(e.target.className).addClass('seats-2')
                }else if(e.target.className == 'seats-2'){
                    $(e.target).removeClass(e.target.className).addClass('seats-1')
                }
            })
        },
        buyClick(){
            // console.log($('.box>div>span.seats-2'));
            // console.log($('.box>div>span.seats-2').length)
            this.hasSelect = $('.box>div>span.seats-2').length;
                // console.log(this.hasSelect);
            this.isbuy = true;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                this.isbuy = false 
            }, 1000);
        }
    },
    created(){
        // this.detailId = this.$route.query.id;
        this.cinemaName = this.$route.query.cinemaName;
        this.time = this.$route.query.time;
        this.getDetail(this.$route.query.cinemaId,localStorage.getItem('cityId'));

        // this.getDetail(this.detailId,this.cityId);
        // this.getDate();
        let  num= this.$route.query.cinemaId;
        num = parseInt(num.slice(-1)/2);
        this.seatsArr = this.randomArr[num];
        if(localStorage.getItem('_token_name')){
            this.islogin = true
        }else{
            this.islogin = false
        }
    },
    mounted(){  

    }


}
</script>
<style lang='scss' scoped>
@import '../assets/font/font_icon/iconfont.css';
.cdetail{
    position:absolute;
    width : 100%;
    min-height:100%;
    background-color : #f4f4f4;
    z-index : 100;
    font-size : 18px;
    
    .Ctop{
        background-color : white;
        height : 50px;
        line-height : 50px;
        text-align : center;
        padding: 0 60px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        .back{
            position:absolute;
            top : 10px;
            left : 10px;
            width : 30px;
            height : 30px;
            background-color :  #f4f4f4;
            border-radius : 50%;
            text-align : center;
            line-height : 30px;
            transform : rotateY(180deg);
            span{
                display : block;
                i{
                    font-size : 23px;
                    color : #FF9900;
                }
            }
        }
        span{
            font-size : 18px;
        }
    }
    .Cbody{
        margin: 2px 0 0;
        height: 300px;
        background: white;
        .box{
            height : 300px;
            width : 300px;
            margin : 0 auto;
            padding: 20px 0 0;
            div{
                .seats-0{
                    display: inline-block;
                    width : 30px;
                    height: 30px;
                }
                .seats-2{
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    background-position: 0 -120px;
                    background-image: url('../assets/img/seats.png');
                    background-size: 100% auto;
                }
                .seats-1{
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    background-image: url('../assets/img/seats.png');
                    background-size: 100% auto;
                }
                .seats-3{
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    background-position: 0 -60px;
                    background-image: url('../assets/img/seats.png');
                    background-size: 100% auto;
                }
            }
        }
    }
    .Ccontent{
        display: flex;
        justify-content: center;
        background: white;
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 1px;
        div{
            display: flex;
            margin: 0 10px;
            span{
                display: block;
                height: 30px;
                line-height: 30px;
                margin-right:6px;
            }
            .s-img{
                width: 30px;
                height: 30px;
                background-image: url(../assets/img/seats.png);
                background-size: 100% auto;
            }
            .s-can{
                background-position: 0 0;
            }
            .s-sale{
                background-position: 0 -60px;
            }
            .s-select{
                background-position: 0 -120px;
            }
        }   
    }
    .wait{
        height: 300px;
        line-height: 300px;
        text-align: center;
        color : grey;
        font-size: 18px;
    }
    .movie{
        background: white;
        margin: 14px 0 0;
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .left{
            height: 60px;
            .l-top{
                padding-top: 2px;
                .movieName{
                    font-size: 20px;
                    // font-weight: bold;
                    color : #004358;
                }
            }
            .l-bottom{
                display: flex;
                margin-top: 12px;
                div{
                    margin-right: 16px;
                }
            }
        }
        .right{
            height: 60px;
            line-height: 60px;
            letter-spacing: 2px;
            color : orange;
            padding-right: 4px;
            font-size: 19px;
        }
    }
    .bottom{
        position: fixed;
        bottom: 0;
        text-align: center;
        height: 50px;
        line-height: 50px;
        width: 100%;
        color : white;
        background: orange;
    }
    .none{
        height: 300px;
        line-height: 300px;
        text-align: center;
    }
    .showTip{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 150px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 20px;
        
    }
    .error{
        color : white;
        background: rgba(0,0,0, .4);
    }
    .success{
        color : white;
        background: rgba(255, 166, 0, 0.6);
    }
}
</style>